<template>
    <div class="topo-toolbox">
        <div class="toolbox-group" v-if="data">
            <div style="width: 100%; height: 12px" v-if="data.items[0].type == '图表元件'"></div>
            <div v-for="(value, index) in data.items" :key="index" style="display: contents">
                <div class="toolbox-item" draggable="true" v-if="value.type != '图表元件'" @dragstart="onDragstart($event, value)" :key="index">
                    <!-- q-icon 图标-->
                    <template v-if="value.isFontIcon === true">
                        <div class="toolbox-item-icon">
                            <q-icon :name="value.icon" size="30px" />
                            <!--                            <img :src="require('@/'+ value.icon)" style="width: 24px;height:24px;" crossorigin="anonymous"/>-->
                        </div>
                        <div class="toolbox-item-text">{{ value.text }}</div>
                    </template>
                    <template v-else-if="value.icon && value.icon.indexOf('statics') > -1">
                        <div class="toolbox-item-icon">
                            <!--以http 开头的 不解析图片路径-->
                            <img v-if="value.icon && value.icon.startsWith('http')" class="topo-dom" :src="value.icon" style="width: 25px; height: 25px" crossorigin="anonymous" />
                            <img v-else-if="value.icon && value.icon.startsWith('statics')" class="topo-dom" :src="require('@/' + value.icon)" style="width: 25px; height: 25px" crossorigin="anonymous" />
                            <img v-else-if="value.icon && value.icon.includes('/zutai/')" class="topo-dom" :src="require('@/' + value.icon)" style="width: 25px; height: 25px" crossorigin="anonymous" />
                            <img v-else class="topo-dom" :src="value.icon" style="width: 25px; height: 25px" crossorigin="anonymous" />
                        </div>
                        <div class="toolbox-item-text">{{ value.text }}</div>
                    </template>
                    <!-- 图库图标 -->
                    <template v-else>
                        <div @mouseover="imageOver($event, value)" @mouseleave="imageLeave">
                            <div class="toolbox-item-icon">
                                <!--以http 开头的 不解析图片路径-->
                                <img v-if="value.icon && value.icon.startsWith('http')" class="topo-dom" :src="value.icon" style="width: 25px; height: 25px" crossorigin="anonymous" />
                                <img v-else-if="value.icon && value.icon.startsWith('statics')" class="topo-dom" :src="require('@/' + value.icon)" style="width: 25px; height: 25px" crossorigin="anonymous" />
                                <img v-else-if="value.icon && value.icon.includes('/zutai/')" class="topo-dom" :src="require('@/' + value.icon)" style="width: 25px; height: 25px" crossorigin="anonymous" />
                                <img v-else class="topo-dom" :src="value.icon" style="width: 25px; height: 25px" crossorigin="anonymous" />
                            </div>
                            <div class="toolbox-item-text">{{ value.text }}</div>
                        </div>
                    </template>
                </div>
                <!-- echart图标 -->
                <div v-else>
                    <div class="toolbox-item-echart" draggable="true" @dragstart="onDragstart($event, value)">
                        <div class="chart-img">
                            <img src="https://img0.baidu.com/it/u=1010810978,70128644&fm=253&fmt=auto&app=138&f=JPG?w=1069&h=500" alt="" />
                            <!-- <img v-if="value.icon && value.icon.startsWith('http')" class="topo-dom" :src="value.icon" style="width: 100%; height: 100%" crossorigin="anonymous" />
                            <img v-else-if="value.icon && value.icon.startsWith('statics')" class="topo-dom" :src="require('@/' + value.icon)" style="width: 100%; height: 100%" crossorigin="anonymous" />
                            <img v-else-if="value.icon && value.icon.includes('/zutai/')" class="topo-dom" :src="require('@/' + value.icon)" style="width: 100%; height: 100%" crossorigin="anonymous" />
                            <img v-else class="topo-dom" :src="value.icon" style="width: 100%; height: 100%" crossorigin="anonymous" /> -->
                        </div>
                        <div class="chart-name">
                            {{ value.text }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :title="iconTitle" :visible.sync="dialogVisibleIcon" width="20%" :close-on-click-modal="false" append-to-body>
            <div style="text-align: center">
                <q-icon :name="iconValue" size="150px" />
            </div>
        </el-dialog>
        <div :style="{ top: imageTop + 'px', left: 330 + 'px' }" class="imageHover" v-if="isShow">
            <div class="toolbox-item-icon">
                <!--以http 开头的 不解析图片路径-->
                <img v-if="imageHover.icon && imageHover.icon.startsWith('http')" class="topo-dom" :src="imageHover.icon" style="width: 150px; height: 150px" crossorigin="anonymous" />
                <img v-else-if="imageHover.icon && imageHover.icon.startsWith('statics')" class="topo-dom" :src="require('@/' + imageHover.icon)" style="width: 150px; height: 150px" crossorigin="anonymous" />
                <img v-else-if="imageHover.icon && imageHover.icon.includes('/zutai/')" class="topo-dom" :src="require('@/' + imageHover.icon)" style="width: 150px; height: 150px" crossorigin="anonymous" />
                <img v-else class="topo-dom" :src="imageHover.icon" style="width: 150px; height: 150px" crossorigin="anonymous" />
                <div class="toolbox-item-text">{{ imageHover.text }}</div>
            </div>
        </div>
    </div>
</template>
<script>
import QIcon from '../../QIcon/index.vue';

export default {
    name: 'DataPanel',
    components: { QIcon },
    props: {
        data: Object,
    },
    mounted() {},
    data() {
        return {
            dialogVisibleIcon: false,
            iconValue: '',
            iconTitle: '',
            dialogVisibleImage: false,
            imageTitle: '',
            imageHover: {
                icon: '',
                text: '',
            },
            imageTop: 0,
            isShow: false,
        };
    },
    methods: {
        imageOver(event, value) {
            // console.log("鼠标经过",event,value);
            this.imageHover = value;
            this.imageTop = event.pageY - 20;
            this.isShow = true;
        },
        imageLeave() {
            // console.log('鼠标离开了');
            this.isShow = false;
        },
        onDragstart(event, info) {
            var infoJson = JSON.stringify(info.info);
            console.log('左边栏开始拖拽', info);
            event.dataTransfer.setData('my-info', infoJson);
        },
        iconClick(value) {
            return;
            // this.dialogVisibleIcon=true;
            // this.iconValue=value;
            // this.iconTitle=value;
        },
        imageClick(label, value) {
            this.dialogVisibleImage = true;
            this.imageTitle = label;
            this.imageValue = value;
        },
    },
};
</script>
<style lang="scss" scoped>
.topo-toolbox .el-menu-item-group__title {
    padding: 0px !important;
}

.topo-toolbox .el-collapse-item__content {
    padding-bottom: 5px !important;
}

.topo-toolbox {
    // border: #ccc solid 1px;
    //background-color: #f1f3f4;
    background-color: #fff;
    overflow-y: auto;
    overflow-x: hidden;

    .toolbox-group {
        display: flex;
        flex-wrap: wrap; //换行，第一行在上
        //justify-content: center;
        justify-content: flex-start;
        width: 100%;
    }

    .toolbox-item {
        //width: 2.8vw;
        width: calc(50% - 20px);
        margin: 10px 10px;
        padding: 5px;
        color: #777;
        border: transparent solid 1px;
        box-sizing: border-box;
    }

    .toolbox-item:hover {
        border: #e6edfd solid 1px;
        background: #e6edfd;
        color: #3388ff;
        border-radius: 6px;
        cursor: pointer;
        transform: scale(1.1);
        transition: transform 0.5s ease-in-out;
    }

    .toolbox-item-echart {
        width: 100%;
        margin: 12px 24px;
        display: flex;
        align-items: center;
        .chart-img {
            width: 92.5px;
            height: 56px;
            border-radius: 4px;
            overflow: hidden;
            margin-right: 12px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .chart-name {
            color: #303133;
            text-overflow: ellipsis;
            font-size: 12px;
            font-weight: 400;
            line-height: 20px;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
        }
    }

    .toolbox-item-echart:hover {
        cursor: pointer;
        transform: scale(1.1);
        transition: transform 0.8s ease-in-out;
    }

    .toolbox-item-icon {
        text-align: center;
    }

    .toolbox-item-text {
        margin-top: 10px;
        font-size: 12px;
        text-align: center;
        font-weight: 700;
    }

    .imageHover {
        position: fixed;
        z-index: 999999;
        text-align: center;
        background-color: aliceblue;
    }
}
</style>
